<template>
  <div class="quan">
    <Header title="新闻详情"></Header>
    <div class="title">
      <p>{{newsDetail.title}}</p>
    </div>
    <div class="sub-title">
      <p>发布人:{{newsDetail.author}}</p>
    </div>
    <div class="detail" v-html="newsDetail.desc"></div>
  </div>
</template>
<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.quan {
  padding: 20px;
}
.quan .title {
  white-space: normal;
  display: block;
  font-weight: 400;
  font-size: 24px;
  line-height: 36px;
  height: 72px;
  word-wrap: break-word;
}
.sub-title {
  display: block;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.54);
  text-indent: 1em;
  margin-bottom: 20px;
}
.detail {
  p {
    img {
      width: 100%;
    }
  }
}
</style>
<script>
// 引入头部组件
import Header from "@c/Header";
export default {
  components: { Header },
  // 数据
  data() {
    return {
      // 新闻详情
      newsDetail: ""
    };
  },
  // 生命周期方法
  created() {
    // 发送请求
    this.$http
      .get("/api/news/" + this.$route.params.id)
      // 监听数据返回
      .then(({ data: { code, data, msg } }) =>
        code ? console.log(msg) : console.log(data) || (this.newsDetail = data)
      );
  }
};
</script>